<!doctype html>
<html lang="en">

<head>
    <title>Browse {{ $repository->name }} - Crystal</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Scripts -->
    <script src="{{ url('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ url('css/app.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/view-design@4.3.2/dist/styles/iview.css">
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            font-size: 16px;
            font-family: 'Source Code Pro VF', 'Source Code Pro', Nunito,'Courier New', Courier, "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑", monospace;
        }

        body {
            display: flex;
        }

        pre {
            background-color: #f8f8f8;
            border: 1px solid rgba(3,169,244,0.6);
            font-size: 13px;
            line-height: 19px;
            padding: 6px 10px;
            border-radius: 3px;
            overflow: auto;
            white-space: pre-wrap;
            word-break: break-all
        }

        .leading {
            font-size: 40px;
            text-transform: capitalize;
        }

        .sidebar {
            height: 100%;
            align-items: center;
            display: flex;
            border-right: solid;
            flex-grow: 1;
            flex-direction: column;
            justify-content: center;
            width: 60%;
            overflow: hidden;
            border-color: var(--gray);
        }

        .divider {
            height: .25rem;
            background-color: #03a9f4;
            width: 3.5rem;
            margin: 1rem 0;
        }

        .browser {
            width: 100%;
            height: 100%;
            flex-grow: 1;
            overflow-y: scroll;
        }

        .code {
            margin: 1rem 5px;
        }

        .code .xmltag {
            color: #397886;
        }

        .code .comment {
            color: #6c6969;
        }

        .sidebar .info {
            width: 100%;
            padding: 0 10px;
        }

        .header-image {
            position: absolute;
            top: 0;
            left: 0;
            right: auto;
            height: 25%;
            width: 100%;
            z-index: -1;
        }
        span.i-split::after {
            padding: 0 .2em;
            color: var(--gray);
            content: '/';
        }

    </style>
</head>

<body>
    <div class="sidebar">
        <div class="header-image">
        </div>
        <div class="info">
            <h1 class="leading">
                {{ $repository->name }}
            </h1>
            <div class="divider"></div>
            <div class="description">
                {{ $repository->description }}
            </div>
            <div class="code">
                <pre><span class="code xmltag">&lt;repositories&gt;</span>
    <span class="code xmltag">&lt;repository&gt;</span>
        <span class="code xmltag">&lt;id&gt;</span>{{ $repository->name }}<span class="code xmltag">&lt;/id&gt;</span>
        <span class="code xmltag">&lt;url&gt;</span>{{ url("/repositories/$repository->name") }}<span class="code xmltag">&lt;/url&gt;</span>
    <span class="code xmltag">&lt;/repository&gt;</span>
    <span class="code comment">&lt;!-- Other repositories --&gt;</span>
<span class="code xmltag">&lt;/repositories&gt;</span></pre>
            </div>
            <div class="footer">
                <div>
                    <a href="https://jq.qq.com/?_wv=1027&k=5ubbGSt" target="_blank" style="color: var(--blue)">需要帮助</a>
                    <span class="i-split"></span>
                    <a href="https://afdian.net/@lss233" target="_blank" style="color: var(--purple)">为我发电</a>
                </div>
            </div>
        </div>
    </div>
    <div class="browser">
        <div id="app">
            <file-browser :repository="'{{ $repository->name }}'"></file-browser>
        </div>
    </div>
</body>

</html>
